<template>
    <div class="main-content-wrap main-content-bg clearfix" v-wechat-title="VueTitle">
        <!-- 彩种导航区域开始 -->
        <div class="sub-nav-wrap">
			<div class="w-1200 clearfix">
				<div class="sub-nav-con" v-if="subNavData.length">
                    <router-link :to="{path:'/article/howToPlay',query:{lottery: item.lottery_type, id: item.article_id}}" :class="{'active' : lottery == item.lottery_type}" v-for="(item,index) in subNavData" :key="index">{{ item.lottery_name }}</router-link>
				</div>
			</div>
		</div>
		<!-- 彩种导航区域结束 -->
        
        <div class="w-1200 trend-main-wrap clearfix">
            <div v-if="loading" class="contentLoad">
                <Spin fix size="large"></Spin>
            </div>
            <template v-else>
                <template v-if="articleContentFlag && !articleContent.content">
                    <div class="noContent"></div>
                </template>
                <template v-else>
                    <div>
                        <h2 class="h2-title">{{articleContent.title}}</h2>
                        <div class="ContentText" v-html="articleContent.content"></div>
                    </div>
                </template>
            </template>
        </div>

    </div>
</template>
<script>
import { jsonToString } from "@/common/js/jsonToString";
import { mapGetters, mapActions } from "vuex";
export default {
    data() {
        return {
            VueTitle: "玩法介绍", //页面标题
            
            subNavData: [],
            lottery: '',
            id: '',
            articleContent: {},
            articleContentFlag: false,
            loading: true,
        };
    },
    created() {
        //获取菜单数据
        this.lottery = this.$route.query.lottery;
        this.id = this.$route.query.id;
        if (this.getHeaderFooter.lottery_list) {
            this.subNavData = this.getHeaderFooter.lottery_list;
            if (this.getHeaderFooter.fit_total) {
                this._getTypeArticle();
            }
       }
    },
    mounted() {
      
    },
    watch: {
        '$route':function(to, form) {
            this.id = this.$route.query.id;
            this.lottery = this.$route.query.lottery;
            if (this.getHeaderFooter.fit_total) {
                this._getTypeArticle();
            }
        },
        getHeaderFooter(obj) {
            if (obj.fit_total) {
                this.subNavData = obj.lottery_list;
                this._getTypeArticle(); 
            }
        },
    },
    computed: {
        ...mapGetters(['getHeaderFooter'])
    },
    methods: {
        // 获取文章内容
        _getTypeArticle() {
            this.articleContent = {};
            this.articleContentFlag = false;
            this.loading = true;
            this.$http.post(this.urlRequest + "?m=api&c=app&a=getArticle", {id: this.id}).then(res => {
                this.loading = false;
                this.articleContentFlag = true;
                if (res.data.status == 0) {
                    if (res.data.data.article.content) {
                        this.articleContent = res.data.data.article;
                    }
                } else {
                    this.$Message.error(res.data.ret_msg);
                }
            });
        },
    }
};
</script>
<style scoped>
.contentLoad .ivu-spin-fix {
    width: 100%;
    height: 500px;
    position: relative;
    background: none;
}
</style>


// WEBPACK FOOTER //
// src/components/article/howToPlay.vue